/**
 * Created by henian.xu on 2017/6/21.
 * layout 布局
 */
$className: $pf + layout;
$headerHeight: 90px;
$footerHeight: 120px;
$contentHeight: 300px;
$siderWidth: 200px;

.#{$className} {
    position: relative;
    //width: 100%;
    //min-height: 300px;
    //height: 100%;

    &-header {
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: $headerHeight;
    }

    &-footer {
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: $footerHeight;
    }

    &-content {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    > .#{$className} {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    &-sider {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        width: $siderWidth;

        & ~ .#{$className},
        & ~ .#{$className}-content {
            margin-left: $siderWidth;
        }

        &.right {
            left: auto;
            right: 0;

            & ~ .#{$className},
            & ~ .#{$className}-content {
                margin-left: 0;
                margin-right: $siderWidth;
            }
        }
    }

    /* fixed */
    &.fixed {
        // 最小高度
        min-height: $headerHeight + $footerHeight + $contentHeight;

        > .#{$className},
        > .#{$className}-header,
        > .#{$className} > .#{$className}-header,
        > .#{$className}-footer,
        > .#{$className} > .#{$className}-footer,
        > .#{$className} > .#{$className}-content,
        > .#{$className} > .#{$className}-sider {
            position: absolute;
        }

        > .#{$className}-header,
        > .#{$className} > .#{$className}-header {
            & ~ .#{$className},
            & ~ .#{$className}-content {
                top: $headerHeight;
            }
        }
        > .#{$className}-footer,
        > .#{$className} > .#{$className}-footer {
            & ~ .#{$className},
            & ~ .#{$className}-content {
                bottom: $footerHeight;
            }
        }

        > .#{$className} > .#{$className}-sider {

        }

        > .#{$className} {
            height: auto;
        }
    }
}

// demo 颜色
.#{$className} {
    color: #fff;
    &-header {
        background-color: mix(#000, $color-main, 20%);
    }

    &-footer {
        background-color: mix(#000, $color-main, 20%);
    }

    &-content {
        background-color: mix(#000, $color-main, 10%);
    }

    > .#{$className} {
        background-color: mix(#000, $color-main, 10%);
    }

    &-sider {
        background-color: mix(#000, $color-main, 30%);
    }
}

